<div [class]="'el-table' + (tableSize ? 'el-table--'+tableSize : '')" [ngStyle]="{ height: height | cssValue }" 
    [class.el-table--enable-row-transition]="true"
    [class.el-table--fit]="fit"
    [class.el-table--group]="isGroup"
    [class.el-table--fluid-height]="maxHeight"
    [class.el-table--scrollable-x]="layout.scrollX"
    [class.el-table--scrollable-y]="layout.scrollY"
    [class.el-table--enable-row-hover]="!store.states.isComplex"
    [class.el-table--enable-row-transition]="((store.states.data || []).length !== 0 && (store.states.data || []).length < 100)"
    [class.el-table--striped]="stripe" 
    [class.el-table--border]="border||isGroup" 
    [class.el-table--hidden]="false">
    <div class="hidden-columns" ref="hiddenColumns">
        <ng-content></ng-content>
    </div>
    <div class="el-table__header-wrapper el-table__header-scroll" [hidden]="!showHeader"
        [ngStyle]="{'overflow-x': (scrollX ? 'auto' : 'hidden')}" #headerRef>
        <el-table-header [model]="columnsWithLevel" [layout]="layout" [columnsWidth]="columnsWidth" [border]="border"
            [height]="height" [center]="center === 'header' || center === 'all'"> 
        </el-table-header>
    </div>
    <div [class]="'el-table__body-wrapper' + (layout.scrollX ? 'is-scrolling-'+scrollPosition:'is-scrolling-none')" [ngStyle]="{ height: layout.bodyHeight | cssValue }"
        (scroll)="bodyScroll($event)">
        <el-table-body [model]="columnsData" [stripe]="stripe" [layout]="layout" [rowClassName]="rowClassName"
            [center]="center === 'all'" [ngStyle]="{ width: layout.bodyWidth + 'px' }"> 
        </el-table-body>
        <div [ngStyle]="{width: layout.bodyWidth + 'px'}" class="el-table__empty-block"
            *ngIf="!model || model.length === 0"> <span class="el-table__empty-text">{{placeholder}}</span> 
        </div>
    </div>
</div>